<div class="modal-dialog prevent-close modal-lg edit-time-series-entry" role="document"
     data-bind="css: { 'fit-dialog-content': model().rollupValues().length || (model().isIncrementalEntry() && $root.lockTimeStamp) }">
    <form class="flex-form" data-bind="submit: save" autocomplete="off" novalidate>
        <div class="modal-content" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click: cancel" aria-hidden="true">
                    <i class="icon-cancel"></i>
                </button>
                <h4 class="modal-title" data-bind="text: model().entryTitle"></h4>
            </div>
            <div class="modal-body" data-bind="with: model">
                <div class="padding padding-sm">
                    <div class="form-group">
                        <label class="control-label">Document ID</label>
                        <div class="flex-grow">
                            <p class="form-control-static" data-bind="text: $root.documentId"></p>
                        </div>
                    </div>
                    <div data-bind="if: isCreatingNewTimeSeries">
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle create-incremental">
                                <input id="createIncremental" type="checkbox" data-bind="checked: createIncrementalTimeSeries">
                                <label for="createIncremental">Create an Incremental Time Series</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: name">
                        <label class="control-label">Series Name</label>
                        <div class="flex-grow">
                            <input type="text" class="form-control" id="name"
                                   data-bind="textInput: name, visible: !$root.lockSeriesName, attr: { placeholder: createIncrementalTimeSeries() ? 'INC:Time Series Name' : 'Time Series Name' }">
                            <strong data-bind="visible: $root.lockSeriesName"><p class="form-control-static" data-bind="text: name"></p></strong>
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: timestamp">
                        <label class="control-label">Timestamp</label>
                        <div>
                            <div class="input-group" data-bind="visible: !$root.lockTimeStamp">
                                <input type="text" class="form-control" id="timestamp" placeholder="Enter timestamp"
                                       data-bind="datePicker: timestamp, datepickerOptions: $root.datePickerOptions" />
                                <div class="input-group-addon">(Local)</div>
                                <span class="help-block" data-bind="validationMessage: timestamp"></span>
                                <div class="margin-left margin-left-lg" data-bind="if: !$root.lockTimeStamp">
                                    <p class="form-control-static" data-bind="text: $root.dateFormattedAsUtc"></p>
                                </div>
                            </div>
                            <p class="form-control-static" data-bind="text: $root.dateFormattedAsLocal, visible: $root.lockTimeStamp"></p>
                            <div data-bind="if: $root.lockTimeStamp">
                                <p class="form-control-static" data-bind="text: $root.dateFormattedAsUtc"></p>
                            </div>
                        </div>
                    </div>
                    <div data-bind="collapse: !createIncrementalTimeSeries() && !isIncrementalEntry()">
                        <div class="form-group" data-bind="validationElement: tag">
                            <label class="control-label">Tag</label>
                            <div class="flex-grow">
                                <div data-bind="css: { 'row': rollupValues().length }">
                                    <div data-bind="css: { 'col-sm-6': rollupValues().length}">
                                        <input type="text" class="form-control" id="tag" placeholder="Enter tag (optional)" data-bind="textInput: tag">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-bind="if: !isRollupEntry() && isIncrementalEntry() && $root.lockTimeStamp">
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle">
                                <input id="showDetails" type="checkbox" data-bind="checked: $parent.showValuesPerNode">
                                <label for="showDetails">Show values per node</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Values</label>
                        <div class="flex-grow margin-top margin-top-sm">
                            <div data-bind="if: !isRollupEntry() && (!isIncrementalEntry() || !$root.lockTimeStamp)">
                                <div data-bind="foreach: values">
                                    <div class="input-group margin-bottom margin-bottom-xs">
                                        <div class="form-control-static margin-right margin-right-sm aggregation-name" data-bind="text: $root.getValueName($index())">
                                        </div>
                                        <div data-bind="validationOptions: { insertMessages: false }, validationElement: value">
                                            <input type="number" class="form-control" data-bind="numericInput: value" style="width: 100%" />
                                            <div data-bind="validationElement: value">
                                                <div class="help-block" data-bind="validationMessage: value"></div>
                                            </div>
                                        </div>
                                        <a title="Remove value" href="#" class="btn" data-bind="click: $parent.removeValue.bind($parent, $data)">
                                            <i class="icon-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="if: isIncrementalEntry() && $root.lockTimeStamp && !isRollupEntry()">
                                <table class="margin-top margin-bottom margin-right">
                                    <thead>
                                    <tr>
                                        <th>&nbsp;</th>
                                        <th class="text-center">Total Value</th>
                                        <th class="text-center">Increment By</th>
                                        <!-- ko foreach: nodesDetails -->
                                        <th class="text-center" data-bind="text: 'Node ' + nodeTag, attr: { title: 'Database ID: ' + databaseID }, collapse: $root.showValuesPerNode"></th>
                                        <!-- /ko -->
                                        <th>&nbsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!-- ko foreach: values -->
                                    <tr>
                                        <td class="name-value">
                                            <label class="form-control-static" data-bind="text: $root.getValueName($index())"></label>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control margin-left per-node-value" data-bind="textInput: value" disabled/>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: delta">
                                            <input type="number" class="form-control per-node-value" data-bind="numericInput: delta" />
                                            <div data-bind="validationElement: delta">
                                                <div class="help-block" data-bind="validationMessage: delta"></div>
                                            </div>
                                        </td>
                                        <td class="delete-column" data-bind="visible: newValue">
                                            <a title="Remove value" href="#" class="btn"
                                               data-bind="click: $parent.removeValueData.bind($parent, $data), visible: $index() >= $parent.existingNumberOfValues">
                                                <i class="icon-trash"></i>
                                            </a>
                                        </td>
                                        <!-- ko foreach: $parent.nodesDetails -->
                                        <td data-bind="collapse: $root.showValuesPerNode">
                                            <div data-bind="collapse: !$parent.newValue()">
                                                <div class="form-control text-muted per-node-value" data-bind="text: $root.getValueOnNode($index(), $parentContext.$index())"></div>
                                            </div>
                                        </td>
                                        <!-- /ko -->
                                        <td class="delete-column" data-bind="visible: !newValue()">
                                            <a title="Remove value" href="#" class="btn"
                                               data-bind="click: $parent.removeValueData.bind($parent, $data), visible: $index() >= $parent.existingNumberOfValues">
                                                <i class="icon-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <!-- /ko -->
                                    </tbody>
                                </table>
                            </div>
                            <div data-bind="if: rollupValues().length">
                                <table class="margin-top margin-bottom">
                                    <thead>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th class="text-center">First</th>
                                            <th class="text-center">Last</th>
                                            <th class="text-center">Min</th>
                                            <th class="text-center">Max</th>
                                            <th class="text-center">Sum</th>
                                            <th class="text-center">Count</th>
                                            <th>&nbsp;</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <!-- ko foreach: rollupValues -->
                                    <tr>
                                        <td class="name-value">
                                            <label class="form-control-static" data-bind="text: $root.getValueName($index())"></label>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: first.value">
                                            <input type="number" class="form-control margin-left" data-bind="numericInput: first.value" />
                                            <div data-bind="validationElement: first.value">
                                                <div class="help-block margin-left" data-bind="validationMessage: first.value"></div>
                                            </div>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: last.value">
                                            <input type="number" class="form-control margin-left" data-bind="numericInput: last.value" />
                                            <div data-bind="validationElement: last.value">
                                                <div class="help-block margin-left" data-bind="validationMessage: last.value"></div>
                                            </div>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: min.value">
                                            <input type="number" class="form-control margin-left" data-bind="numericInput: min.value" />
                                            <div data-bind="validationElement: min.value">
                                                <div class="help-block margin-left" data-bind="validationMessage: min.value"></div>
                                            </div>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: max.value">
                                            <input type="number" class="form-control margin-left" data-bind="numericInput: max.value" />
                                            <div data-bind="validationElement: max.value">
                                                <div class="help-block margin-left" data-bind="validationMessage: max.value"></div>
                                            </div>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: sum.value">
                                            <input type="number" class="form-control margin-left" data-bind="numericInput: sum.value" />
                                            <div data-bind="validationElement: sum.value">
                                                <div class="help-block margin-left" data-bind="validationMessage: sum.value"></div>
                                            </div>
                                        </td>
                                        <td data-bind="validationOptions: { insertMessages: false }, validationElement: count">
                                            <input type="number" class="form-control margin-left count-value" data-bind="numericInput: count" />
                                            <div data-bind="validationElement: count">
                                                <div class="help-block margin-left" data-bind="validationMessage: count"></div>
                                            </div>
                                        </td>
                                        <td class="delete-column">
                                            <a title="Remove value" href="#" class="btn margin-left" data-bind="click: $parent.removeRollupData.bind($parent, $data)">
                                                <i class="icon-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <!-- /ko -->
                                    </tbody>
                                </table>
                            </div>
                            <div data-bind="if: values.error()">
                                <div data-bind="validationElement: values">
                                    <div class="help-block margin-bottom" data-bind="validationMessage: values"></div>
                                </div>
                            </div>
                            <div data-bind="if: rollupValues.error()">
                                <div data-bind="validationElement: rollupValues">
                                    <div class="help-block margin-bottom" data-bind="validationMessage: rollupValues"></div>
                                </div>
                            </div>
                            <span class="has-disable-reason" data-placement="right"
                                  data-bind="attr: { 'data-original-title': maxNumberOfValuesReachedWarning() || '' }">
                                <button class="btn btn-default btn-sm" data-bind="click: addValue, disable: maxNumberOfValuesReachedWarning()">
                                    <i class="icon-plus"></i>
                                    <span>Add Value</span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group" data-bind="visible: isRollupEntry() && $root.lockSeriesName">
                        <label class="control-label">&nbsp;</label>
                        <div class="bg-warning text-warning padding padding-sm flex-horizontal" data-bind="css: { 'col-sm-6': rollupValues().length }">
                            <div class="flex-start"><small><i class="icon-warning"></i></small></div>
                            <div class="margin-right margin-right-sm">
                                <small>Please note: Values for this time series are the result of a pre-defined rollup policy.</small><br>
                                <small>Editing or deleting any value can impact other aggregations and queries.</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" data-bind="visible: !isRollupEntry() && values().length > 5">
                        <label class="control-label">&nbsp;</label>
                        <div class="bg-warning text-warning padding padding-xs flex-horizontal">
                            <div class="flex-start"><small><i class="icon-warning"></i></small></div>
                            <div>
                                <small>Warning: Aggregated rollup data is not created for a Time Series if an Entry has more than 5 values.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bind="click: cancel">Cancel</button>
                <button type="submit" class="btn btn-primary" data-bind="css: { 'btn-spinner': spinners.save }, disable: spinners.save">
                    <i class="icon-save"></i>
                    <span>Save</span>
                </button>
            </div>
        </div>
    </form>
</div>
